<template>
    <div class="home">
        <!-- 二级路由得坑 -->
        <router-view v-if="$route.path == '/home/search'"></router-view>
        <div v-else>
             <!-- 搜索框 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" @search="onSearch" @click="$router('/home/search')"/>
        <!-- 轮播图 -->
        <Swiper :bannerArr="bannerArr"></Swiper>
        <!-- 导航 -->
        <Grid :channelArr="channelArr"></Grid>
        <!-- 品牌制造商 -->
        <Brand :brandList="brandList"></Brand>
        <!-- 新品首发 -->
        <NewGoodsList :newGoodsList="newGoodsList"></NewGoodsList>
        <!-- hot 人气推荐 -->
        <HotGoodsList :hotGoodsList="hotGoodsList"></HotGoodsList>
        <!-- 专题精选 -->
        <TopicList :topicListArr="topicListArr"></TopicList>
        <GoodsList :goodsList="goodsList"></GoodsList>
        <!-- 引入最后组件 -->
        <Goods :goodsArr='goodsArr'></Goods>
        </div> 
    </div>
</template>


<script>
//搜索框
// import value from 'less/lib/less/tree/value';
import { Toast } from 'vant';

//引入轮播图
import Swiper from '@/components/Swiper.vue'
//引入导航
import Grid from '@/components/Grid.vue'
//引入 品牌制造商
import Brand from '@/components/Brand.vue'
//引入new goodlist
import NewGoodsList from '@/components/NewGoodsList.vue'
//引入hot 人气推荐
import HotGoodsList from '@/components/HotGoodsList.vue'
//引入  TopicList 专题精选
import TopicList from '@/components/TopicList.vue'
import GoodsList from '@/components/GoodsList.vue'
//引入最后的
import Goods from '@/components/Goods.vue'


//导入首页接口请求
import { getIndexData } from '@/utils/http'
export default {
    name: 'Home',
    data() {
        return {
            value: '', //搜索框
            bannerArr: [],//轮播图
            channelArr: [],//导航数组
            brandList: [], //品牌制造商
            newGoodsList: [], // newGoodsList
            hotGoodsList:[], //hot 人气推荐
            topicListArr:[],//专题精选
            goodsArr:[],//最后
            goodsList:[],
        }
    },
    components: {
        Swiper,
        Grid,
        Brand,
        NewGoodsList,
        HotGoodsList,
        TopicList,
        Goods,
        GoodsList
    },
    methods: {
        onSearch(val) {
            Toast(val);
        },
    },

    created() {
        getIndexData().then((res) => {
            console.log(res);
            this.bannerArr = res.data.data.banner;
            this.channelArr = res.data.data.channel;
            this.brandList = res.data.data.brandList;
            this.newGoodsList = res.data.data.newGoodsList;
            this.hotGoodsList = res.data.data.hotGoodsList;
            this.topicListArr = res.data.data.topicList;
            this.goodsArr = res.data.data.categoryList;
             this.goodsList = res.data.data.goodsList;
        })
    },
};
</script>
<style scoped lang="less">
.home {
    padding-bottom: 50px;
}
</style>